<template>
	<!-- 收款界面  扫码刷卡 -->
	<view>
		
		<u-navbar title="交易记录" class="nav" :placeholder="true"
			:fixed="true"
			:safeAreaInsetTop="true">
			<view slot="left">
				<u-icon name="arrow-left" size="12" @click="onClickBack"></u-icon>
			</view>
			<!-- <view slot="right" @click="onClickRight">
				筛选
			</view> -->
		</u-navbar>
		<scroll-view scroll-x class=" nav text-center">
			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in type" :key="index"
				@tap="tabSelect" :data-id="index">
				{{item.name}}
			</view>
		</scroll-view>
		
		<view class="padding text-gray">
			{{date}}
		</view>
		
		<view class="cu-list grid col-2 bg-white">
			<view class="cu-item">
				<text class="text-bold">{{info.total}}</text>
				<text>交易笔数</text>
			</view>
			<view class="cu-item">
				<text class="text-bold">{{info.order_amount}}</text>
				<text>交易金额</text>
			</view>
		</view>
		<view class="">
			<view class="cu-list menu-avatar"  v-if="orderList.length > 0">
				<view class="cu-item grayscale" v-for="(item,index) in orderList" :key="index">
					<view class="cu-avatar radius lg bg-blue">扫</view>
					<view class="content">
						
						<view class="text-cut">{{item.order_id}}</view>
						
						<view class="text-gray text-sm flex"> 
							<view class="text-cut">{{item.createtime}}</view>
						</view>
					</view>
					<view class="action">
						{{item.order_amount}}
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无数据"></u-empty>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-loadmore :status="status" class="w-pb-10" v-if="orderList.length >= 10"/>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				TabCur: 0,
				scrollLeft: 0,
				clock: Date.parse(new Date()),
				type: [{
						name: "扫码"
					},
					{
						name: "刷卡"
					}
				],
				info:{
					rows: []
				},
				orderList: [],
				date: currentDate,
				status: 'loadmore',
				page: 1,
				closeRequest: false
			}
		},
		onLoad(option) {
			
			if(option.type===2){
				this.TabCur=1
			} else {
				this.TabCur=0
			}
			this.getInfo(this.page);
		},
		onReachBottom () {
			if (this.info.rows.length >= 10) {
				this.status = 'loading';
				this.page = ++ this.page;
				setTimeout(() => {
					this.getInfo(this.page)
					if (this.closeRequest) this.status = 'nomore';
					else this.status = 'loading';
				}, 1500)
				
			}
		},
		methods: {
			onClickBack() {
				uni.navigateBack()
			},
			tabSelect(e) {
				this.closeRequest = false
				this.page = 1
				this.orderList = []
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.getInfo(this.page);
			},
			async getInfo(page){
				if (this.closeRequest) {
					this.$refs.uToast.show({
						type: 'default',
						title: '默认主题',
						message: "没有更多了",
					})
					this.status = 'nomore'
					return
				}
				let params = {
					s_time:new Date(new Date().toLocaleDateString())/1000,
					e_time:new Date(new Date().toLocaleDateString())/1000+60*60*24,
					pn: page,
					page_size: 10
				}
				let urlSplicing = ''
				if (this.TabCur===1) {
					urlSplicing = '?pay_type[3]=30'
				} else {
					urlSplicing = '?order_status[0]=0&order_status[1]=20&order_status[2]=40'
				}
				const res = await this.$API({url: '/api/order/order_list'+urlSplicing,method:"GET", data: params})
				if (res.code === 1) {
					this.info= res.data
					if (res.data.rows.length > 0) {
						for (let item of res.data.rows) {
							this.orderList.push(item)
						}
						this.status = 'loadmore'
					} else {
						if (page > 1) {
							this.status = 'nomore'
							this.$refs.uToast.show({
								type: 'default',
								title: '默认主题',
								message: "没有更多了",
							})
							this.closeRequest = true
						}
						
					}
				}
				
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		},
	}
</script>

<style>
	.center {
	    margin: auto;
	    width: 100%;
	  /*  border: 3px solid green; */
	    padding: 10px;
		background-color:#f0f0f0 
	}
	.c_text{
		font-weight: 700;
		font-size: 30upx;
	}
	.biaoti_level {
		/* float: left; */
		flex: content;
	}

	.biaoti_style {
		/* margin-right: 100upx; */
		/* margin-left: 50upx; */
		/* letter-spacing: 10upx; */
		/* margin-top: 20upx; */
		font-size: 40upx;
	}
	.cu-list.grid>.cu-item:after {border: none;}
	
	.cu-list.grid>.cu-item uni-text {color: #000;}
</style>
